import {Component, ComponentProps, VueComponent, Link, Hook, Mut, Computed} from "vue3-oop";
import {NButton, NCard, NCollapse, NDrawer, NDrawerContent, NForm, NScrollbar, NSpace, NTag, NTabs, NTabPane} from "naive-ui";
import { nicon } from "@/utils/IconUtil";
import styles from "./index.module.scss";
import BpmnModeler from '../BpmnModeler';
import { ProcessTabs,SequenceFlowTabs,StartEventTabs,EndEventTabs,UserTaskTabs,ServiceTaskTabs,
  ExclusiveGatewayTabs,ParallelGatewayTabs,InclusiveGatewayTabs } from './tabs';

interface IProps {
  bpmnModeler: BpmnModeler,
  drawerTo: string,
}
@Component()
export default class ConfigPanel extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    bpmnModeler:{},
    drawerTo: {default:'drawerToId'},
  }

  constructor() {
    super()
  }

  @Mut() private state = {
    showPanel: false,
  }

  /** 切换打开关闭属性面板 */
  public toggleShowPanel=()=>{
    this.state.showPanel = !this.state.showPanel;
  }

  render(){
    const { bpmnModeler } = this.props;
    const { selectedId,selectedName,selectedShape } = bpmnModeler;
    const selectedTypeName = bpmnModeler.getBpmnShapeName(selectedShape);
    const configButtonLabel = `属性面板 ${selectedTypeName}[${selectedName&&selectedName.length>0?selectedName:selectedId}]`;
    return(
      <>
        <NButton
          class={[styles.bpmn_config_button]}
          size={"small"}
          onClick={this.toggleShowPanel}
        >{configButtonLabel}</NButton>
        <NDrawer
          class={[styles.bpmn_config_drawer]}
          to={this.props.drawerTo}
          placement={'bottom'}
          resizable={true}
          trapFocus={false}
          showMask={false}
          show={this.state.showPanel}
          defaultHeight={300}
        >
          <NDrawerContent>
            <NCard>
              {{
                header:()=>(
                  <NSpace><NTag bordered={false} size={'large'} style={{fontSize:'18px'}} color={{color:'whitesmoke'}}>
                    {{ avatar: nicon("IosSettings"), default: ()=>configButtonLabel }}
                  </NTag></NSpace>
                ),
                'header-extra':()=>(
                  <NSpace size={'small'}>
                    <NButton size={'small'} type={"primary"} onClick={this.toggleShowPanel}>关闭面板</NButton>
                  </NSpace>
                ),
                default:()=>{
                  if(selectedShape==='Process'){
                    return <ProcessTabs class={[styles.bpmn_config_tabs]} bpmnModeler={this.props.bpmnModeler} />
                  }else{
                    const selectedCell = this.props.bpmnModeler.selectedCell;
                    if(selectedShape==='SequenceFlow'){
                      return <SequenceFlowTabs class={[styles.bpmn_config_tabs]} bpmnModeler={this.props.bpmnModeler} selectedCell={selectedCell}/>
                    }else if(selectedShape==='StartEvent'){
                      return <StartEventTabs class={[styles.bpmn_config_tabs]} bpmnModeler={this.props.bpmnModeler} selectedCell={selectedCell}/>
                    }else if(selectedShape==='EndEvent'){
                      return <EndEventTabs class={[styles.bpmn_config_tabs]} bpmnModeler={this.props.bpmnModeler} selectedCell={selectedCell}/>
                    }else if(selectedShape==='UserTask'){
                      return <UserTaskTabs class={[styles.bpmn_config_tabs]} bpmnModeler={this.props.bpmnModeler} selectedCell={selectedCell}/>
                    }else if(selectedShape==='ServiceTask'){
                      return <ServiceTaskTabs class={[styles.bpmn_config_tabs]} bpmnModeler={this.props.bpmnModeler} selectedCell={selectedCell}/>
                    }else if(selectedShape==='ExclusiveGateway'){
                      return <ExclusiveGatewayTabs class={[styles.bpmn_config_tabs]} bpmnModeler={this.props.bpmnModeler} selectedCell={selectedCell}/>
                    }else if(selectedShape==='ParallelGateway'){
                      return <ParallelGatewayTabs class={[styles.bpmn_config_tabs]} bpmnModeler={this.props.bpmnModeler} selectedCell={selectedCell}/>
                    }else if(selectedShape==='InclusiveGateway'){
                      return <InclusiveGatewayTabs class={[styles.bpmn_config_tabs]} bpmnModeler={this.props.bpmnModeler} selectedCell={selectedCell}/>
                    }
                  } 
                  return null;
                }
              }}
            </NCard>
          </NDrawerContent>
        </NDrawer>
      </>
    )
  }
}